<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*class，类选择器，符号： . */
        .ji {
            color: red;
        }

        /*id选择器，符号：#*/
        #hui {
            color: red;
        }

        /* 标签选择器，选择所有对应的标签*/
        div {
            font-size: 20px;
        }

        /* 组合选择器，串联多个选择器，是他们同时生效*/
        .ji,
        #hui {
            font-style: italic;
            /*斜体*/
        }

        .done li {
            color: gray;
            text-decoration: line-through;
        }
        .todo li button{
            /*float: right;*/
            /*绝对定位：会以第一个不是默认定位的元素为原点进行定位*/
            position: absolute;
            top: 0;
            right: 0;
            
        }
        .todo li{
            width:244px; 
            position: relative; /*默认定位*/
            height:27px;
        }
        .active{
            text-decoration: underline;
        }
        .pre{
            /*cursor：游标、光标*/
            cursor:not-allowed;
        }
    </style>
    <!--引入外部css文件-->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <p class="ji">机</p>
        <p id="hui">会</p>
        <div>hello</div>
        <hr>
        <p><big>并</big><small>非</small>梦想离我们太远</p>
        <p>只是我们付出的太少</p>
        <mark>这是重点！</mark>
        <p>H<sub>2</sub>O</p>
        <p>30<sup>o</sup></p>
    </div>
    <hr>
    <p>待办事项</p>
    </ol>
    <!-- 第一部分，记录-->
    <input type="text" placeholder="请输入待办事项">
    <button>保存</button>
    <!-- 第二部分，待办事项-->
    <p>待办事项</p>
    <ol class="todo">
        <li>
            <span>eating</span>
            <button>完成</button>
        </li>
        <li>
            <span>sleeping</span>
            <button>完成</button>
        </li>
        <li>
            <span>coding</span>
            <button>完成</button>
        </li>
    </ol>
    <!-- 第三部分，已完成事项-->
    <p>已完成事项</p>
    <ol class="done">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <hr>
    <!-- 以下是盒模型-->
    <div class="box"></div>
    <div class="sbox"></div>
    <div class="box2"></div>
    <br>
    <br>
    <hr>
    <!-- lt:less than 小于号-->
    <button  disabled class="pre">&lt;</button>
    <button class="active">1</button>
    <button>2</button>
    <button>&gt;</button>
    <!-- gt:great than大于号-->
</body>
</html>